$(function(){
  // 加载导航栏
  fetch('../../html/qian/nav.html').then(function(res){
    return res.text()
  }).then(function(data){
    // console.log(data);
    document.querySelector(".nav").innerHTML = data
  })
  // 背景切换
  var fla = true;
  var $dot = $(".middle .dot span");
  function lun(){
    var $lun = $(".middle .bj");
    if(fla){
      $lun.css("background","url(../../images/qian/index/banner2.jpg) no-repeat");
      $dot.eq(0).removeClass("span")
      $dot.eq(1).addClass("span")
      fla = false;
    }else {
      $lun.css("background","url(../../images/qian/index/banner1.png) no-repeat");
      $dot.eq(1).removeClass("span")
      $dot.eq(0).addClass("span")
      fla = true; 
    }
  }
  // 定时器 and 点击切换背景
  setInterval(lun,5000)
  $dot.each(function(){
    $(this).click(lun)
  })

  // 左边新闻部分
  var $spans = $(".content .effect .l-title span");
  var $news = $(".content .effect .news");
  // 新闻标题样式 新闻内容 点击切换
  $spans.each(function(index,data){
    $(data).click(function(){
      // 循环 进行排他算法
      $spans.each(function(i,item){
        $(item).removeClass("span")
        $news.eq(i).css("display","none")
      })
      // 给当前点击的元素 进行修改样式
      $(this).addClass("span")
      $news.eq(index).css("display","block")
    })
  })
  // 左边新闻内容从json中加载
  $.getJSON("../../api/index.json",
    function (data) {
      $.each(data,function(i,item){
        // console.log(item.title);
        if(i<4){
          $(".dc").append(
            `<li>
              <div class="date">
                <p>${item.moon}</p>
                <p>${item.sun}</p>
              </div>
              <div class="val">
                <p><span>[投资动态]</span>${item.title}</p>
                <p>${item.content}</p>
              </div>
            </li>`
          )
        }else if(i<8){
          $(".xw").append(
            `<li>
              <div class="date">
                <p>${item.moon}</p>
                <p>${item.sun}</p>
              </div>
              <div class="val">
                <p><span>[新闻动态]</span>${item.title}</p>
                <p>${item.content}</p>
              </div>
            </li>`
          )
        }
      })
    }
  );
  // 右边新闻图片轮播
  var i = 1;
  var $s = $(".right .lun div>span")
  function lb(){
    if(i==1){
      $s.each(function(){
        $(this).css("backgroundColor","#fff")
      })
      $($s[i]).css("backgroundColor","#08f")
      $(".lun").css("backgroundImage","url(../../images/qian/index/lun2.jpg)")
      $(".lun p").text("国务院“互联网+督查”平台公开征集涉企乱收费问题线索")
      i++;
    }else if(i==2){
      $s.each(function(){
        $(this).css("backgroundColor","#fff")
      })
      $($s[i]).css("backgroundColor","#08f")
      $(".lun").css("backgroundImage","url(../../images/qian/index/lun3.jpg)")
      $(".lun p").text("李克强总理作政府工作报告（文字摘要）+督查”平台公开征集涉企乱收费问题线索")
      i=0;
    }else if(i==0){
      $s.each(function(){
        $(this).css("backgroundColor","#fff")
      })
      $($s[i]).css("backgroundColor","#08f")
      $(".lun").css("backgroundImage","url(../../images/qian/index/lun1.jpg)")
      $(".lun p").text("全国脱贫攻坚总结表彰大会隆重举行 习近平向全国脱贫攻坚楷模荣誉称号获得者等颁奖并发表重要讲话+督查”平台公开征集涉企乱收费问题线索")
      i++;
    }
  }
  
  var ti = setInterval(lb,3000)
  // 鼠标悬停是停止轮播
  $(".lun").mouseenter(function(){
    clearInterval(ti)
  })
  $(".lun").mouseleave(function(){
    ti = setInterval(lb,3000)
  })
  // 给每个小圆点绑定点击切换效果
  $s.each(function(index,item){
    $(item).click(function(){
      i=index
      $s.each(function(){
        $(this).css("backgroundColor","#fff")
      })
      if(index==1){
        $($s[index]).css("backgroundColor","#08f")
        $(".lun").css("backgroundImage","url(../../images/qian/index/lun2.jpg)")
        $(".lun p").text("国务院“互联网+督查”平台公开征集涉企乱收费问题线索")
      }else if(index==2){
        $($s[index]).css("backgroundColor","#08f")
        $(".lun").css("backgroundImage","url(../../images/qian/index/lun3.jpg)")
        $(".lun p").text("李克强总理作政府工作报告（文字摘要）+督查”平台公开征集涉企乱收费问题线索")
      }else if(index==0){
        $($s[index]).css("backgroundColor","#08f")
        $(".lun").css("backgroundImage","url(../../images/qian/index/lun1.jpg)")
        $(".lun p").text("全国脱贫攻坚总结表彰大会隆重举行 习近平向全国脱贫攻坚楷模荣誉称号获得者等颁奖并发表重要讲话+督查”平台公开征集涉企乱收费问题线索")
      }
    })
  })
  // 3d轮播效果
  var $aa= $(".content .list")
  var arr = []
  var style = ["transform","left"]
  // console.log(arr.length);
  var move = true
  setInterval(lun3,2000)
  $(".list-l").click(function(){
    if(move){
      move = false
      lun3(true)
    }
  })
  $(".list-r").click(function(){
    if(move){
      move = false
      lun3(false)
    }
  })
  function lun3(dir) {
    $aa.each(function(a,item){
      arr[a] = $(item).css(style)
    })
    for (var i=0;i<arr.length;i++){
      var n;
      if(dir){
        n = i+1
        if(n>6){
          n=0
        }
      }else{
        n = i-1
        if(n<0){
          n=6
        }
      }
      $($aa[i]).css({"transform":arr[n].transform,"left":arr[n].left})
    }
    move = true
  }
    $(".list").each(function(i,item){
      $(item).mouseenter(function(){
        $(this).css({"background":"#08f","color":"#fff"})
      })
      $(item).mouseleave(function(){
        $(this).css({"background":"#fff","color":"#000"})
      })
    })
  // console.log(($($aa[3]).css(style)).transform);
  // console.log(arr);
// tab json数据加载
  $.getJSON("../../api/customer.json",
    function(data){
      $.each(data,function(i,item){
        console.log(i)
        if(i<4){
          $(".tab tbody").append(`
            <tr>
              <td>${item.ppn}</td>
              <td>${item.contract}</td>
              <td>${item.name}</td>
              <td>${item.phone}</td>
              <td>通过</td>
            </tr>
          `)
        }
      })
    }
  )
  // 加载数据
  $.getJSON("../../api/index.json",
    function (data) {
      $.each(data,function(i,item){
        // console.log(item.title);
        if(i<2){
          $(".zc").append(
            `<li>
              <div class="date">
                <p>${item.moon}</p>
                <p>${item.sun}</p>
              </div>
              <div class="val">
                <p><span>[投资动态]</span>${item.title}</p>
                <p>${item.content}</p>
              </div>
            </li>`
          )
        }else if(i<4){
          $(".jd").append(
            `<li>
              <div class="date">
                <p>${item.moon}</p>
                <p>${item.sun}</p>
              </div>
              <div class="val">
                <p><span>[新闻动态]</span>${item.title}</p>
                <p>${item.content}</p>
              </div>
            </li>`
          )
        }
      })
    }
  );
  var $sp = $(".end .tie span");
  var $ne = $(".end .left .con");
  $sp.each(function(index,data){
    $(data).click(function(){
      // 循环 进行排他算法
      $sp.each(function(i,item){
        $(item).removeClass("span")
        $ne.eq(i).css("display","none")
      })
      // 给当前点击的元素 进行修改样式
      $(this).addClass("span")
      $ne.eq(index).css("display","block")
    })
  })
})